<template>
 <div class="model-page">
    <div class="page-full-infoDetail">
      <!-- 顶部 -->
      <topHeader title="资讯详情" :nobg='true' :show-right='true'>
        <template v-slot:left>
          <!-- <span class="c_icon c_back"></span> -->
        </template>
        <template v-slot:right>
          <span class="c_icon c_share" @click="sharePop()"></span>
        </template>
      </topHeader>
      
      <!-- 顶部广告 -->
      <div class="top_banner"  @click=" toBanner(topBanner.link)" v-if="topBanner">
        <div class="top_info">
          <p class="title">{{topBanner.title}}</p>
          <div class="gray_info">
            <p class="advertise">广告</p>
            <p class="name">{{topBanner.goodname}}</p>
            <p class="view">{{topBanner.number}}人浏览</p>
          </div>
        </div>
        <img :src="imgUrl(topBanner.img_url)" alt="广告图" class="top_image">
      </div>
      <!-- 文章 -->
      <article class="content">
        <div class="ad_wrapper" v-if="fetch_data.imgurl || fetch_data.contentimg">
          <img v-if="fetch_data.type == 2" :src="imgUrl(fetch_data.contentimg)" alt="">
          <img v-else :src="imgUrl(fetch_data.imgurl)" alt="">
          <span v-if="fetch_data.looknumber" class="num">{{fetch_data.looknumber}}人已看</span>
        </div>

        <div class="word_wrapper">
          <h3 v-if="fetch_data.type ==1">{{fetch_data.titlename}}</h3>
          <h3 v-else>{{fetch_data.title}}</h3>
          <div class="mixin_info">
            <p class="source">来源：{{source}}</p>
            <p class="publish_time">{{fetch_data.time}}</p>
            <p class="view">{{fetch_data.looknumber}}人浏览</p>
          </div>
          <div v-html="fetch_data.content"></div>
        </div>

      </article>

      <!-- 底部广告 -->
      <div class="bottom-banner" v-if="bottomBanner" @click="toBanner(bottomBanner.link)">
        <p class="bottom_title">{{bottomBanner.title}}</p>
        <img :src="imgUrl(bottomBanner.img_url)" alt="广告图"  class="bottom_img">
        <div class="bottom_info">
          <p class="bottom_poster">广告</p>
          <p class="bottom_name">{{bottomBanner.goodname}}</p>
          <p class="bottom_view">{{bottomBanner.number}}人浏览</p>
        </div>
      </div>

      <!-- 开运宝典 -->
      <div class="luck_book_wrapper" v-if="fetch_data_book">
        <ul class="content">
          <!-- <li v-for="(i,idx) in fetch_data_book" :key="'book_'+idx" @click="toInfoDetail(2,i.id)"> -->
          <li v-for="(i,idx) in fetch_data_book" :key="'book_'+idx" @click="toInfoDetail(2,i.id,i.ios_link,i.title,i.subtitle,i.titleimg)">
            <div class="c_img">
              <img :src="imgUrl(i.titleimg)" alt="热门文章图">
            </div>
            <div class="c_info">
              <div class="tt">
                <p class="fontHideOne">{{i.title}}</p>
                <span>{{i.looknumber}}人已看</span>
              </div>
              <p class="des">
                {{clipText(i.subtitle,50)}}
              </p>
            </div>
          </li>
        </ul>
        <div class="more_page" v-if="!noData &&　fetch_data_book.length!=0" @click="showMoreBook">
          <p class="view_more" >查看更多</p>
          <img src="../../../static/image/public/more_arrow.png" alt="更多" class="more_arrow">
        </div>
      </div>
      <div v-if="noData&&fetch_data_book.length!=0" class="no-data">加载完毕</div>
    </div>

    <share :ShareParams="ShareParams" :showShareStatus="showShareStatus" @changeStatus='showShareStatus=$event'></share>
  </div>
</template>

<script>
import tool from '@/assets/js/tool.js';
import topHeader from '@/components/topHeader';
import share from '@/components/sharePopup';

export default {
  components:{
    topHeader,
    share
  },
  data(){
    return {
      showShareStatus:false,
      fetch_data:{},
      ShareParams:{
        'shareLink':this.$route.params.shareLink,
        'shareTitle':this.$route.params.shareTitle,
        'shareContent':this.$route.params.shareContent,
        'shareThumbs':this.$route.params.shareThumbs
      },
      topBanner: undefined,
      bottomBanner: undefined,
      source: undefined,//文章来源
      fetch_data_book:[],//热门推荐
      page_article: 0,
      isFetchNext:true,
      noData: false,
      noDataBook: false
    }
  },
  created(){
    this.$store.commit('changePageLoading',true);
    this.fetch_page();
    window.scrollTo(0, 0);
  },
  methods:{
    sharePop(){
      this.showShareStatus=!this.showShareStatus;
    },
    imgUrl(url){
      return tool.imgUrl(url);
    },
    fetch_page(){
      var params ={
        type:this.$route.query.type,
        id:this.$route.query.id,
      };
      // console.log(params);
      this.$fetch.post('/app/Jmyc/detail',params).then((res)=>{
        if(res.code ==200){
          this.fetch_data = res.data;
          this.topBanner = res.data.ad.top_ad.title?res.data.ad.top_ad:false,
          this.bottomBanner = res.data.ad.bottom_ad.title?res.data.ad.bottom_ad:false
          this.source = res.data.new_from || '吉命国学'
          this.fetch_data_book = res.data.hot_list instanceof Array ?res.data.hot_list : []
          this.$store.commit('changePageLoading',false);
        }
      });
    },
    /* 热门文章推荐加载更多 */
    fetch_book(page){
      this.$fetch.post('/app/Jmyc/new_hotlist',{
        new_id: this.$route.query.id,
        page: page
        }).then((res)=>{
        if(res.data.length == 0){
          this.isFetchNext = false;
          this.noData = true
          return;
        }
        if(res.code == 200){
          this.fetch_data_book =[...this.fetch_data_book, ...res.data];
          // this.fetch_data_book = this.fetch_data_book.concat(res.data);
          if(res.data.length < 4){
            this.isFetchNext = false;
            this.noData = true
            return;
          }
          this.$store.commit('changePageLoading',false);
        }
      });
    },
    // 查看更多
    showMoreBook() {
      ++this.page_article
      if(this.isFetchNext){
        this.isLoadMore = true
        this.fetch_book(this.page_article)
      }
    },
    // 跳转广告链接
    toBanner(link) {
      tool.createNavigation(this,'advertise', link)
    },
    // 跳转文章详情页
    toInfoDetail(type,id,shareLink,shareTitle,shareContent,shareThumbs){
      this.$router.replace({
        name:'h_infoDetail',
        query:{
          'type':type,
          'id':id,
        },
        params: {
          'shareLink':shareLink,
          'shareTitle':shareTitle,
          'shareContent':shareContent,
          'shareThumbs':this.imgUrl(shareThumbs)
        },
      })
      location.reload()
    },
    imgUrl(url){
      return tool.imgUrl(url);
    },
    /*截取字符串*/
    clipText(text,num){
      return tool.clipText(text,num)
    },
  },  
}
</script>

<style lang="less" scoped>
@import "../../assets/css/public.less";
@import "../../assets/css/tml_base.less";
@import "./index.less";
/deep/  .page-full-infoDetail{
  img {
    max-width: 100%;
    margin: auto;
  }
  // 顶部
  #topHeaderComponent{
    .top-header{
      background: #fff!important;
      &.top-header-transparent{
        color: #333;
      }
      .c_icon{
        display: inline-block;
        width: 100px;
        height: 88px;
      }
      // .top-header-left{
      //   .c_back{
      //       background: url(../../../static/image/public/i_back_white.png) no-repeat center/34px 34px;
      //   }
      // }
      .top-header-right{
        .c_share{
          background: url(../../../static/image/public/i_share1.png) no-repeat center/34px 34px;
        }
      }
      .top-header-title{
        color: #333;
      }
    }
  }
}
</style>